<template>
  <view class="payCourteous">
    <global-loading />

    <view
        class="payTitBox flex-items flex-center"
        :style="{'padding-top': topHeight + 'px'}"
    >
      <view class="payTit fs30">支付成功</view>
    </view>
    <view class="resultCard">
      <view class="imgBox">
        <image :src="`${VUE_APP_STATIC_URL}ui-static/images/payIcon.png`"></image>
      </view>
      <view class="successful">支付成功</view>
      <view class="btnBox fs28 font-color-333">
        <view
            class="orderBtn btn"
            @click="goToOrder"
        >查看订单
        </view>
        <view
            class="homeBtn btn"
            @click="goToHome"
        >返回首页
        </view>
      </view>
    </view>

    <!-- 推荐 -->
    <HotTemplate />
  </view>
</template>

<script setup>
import HotTemplate from "@/components/hoteRecommed/new.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { nextTick, ref } from "vue";
import { VUE_APP_STATIC_URL } from "@/config/api";

onShow(() => {
  // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  topHeight.value = menuButtonInfo.top + 10
  // #endif
})
onLoad(option => {
  orderId.value = option.orderId
})

const orderId = ref(null)
const topHeight = ref(0)

function goToOrder() {
  uni.navigateTo({
    url: '../orderModule/index'
  })
}

function goToHome() {
  uni.switchTab({
    url: '/pages/tabbar/index/index'
  })
}
</script>

<style
    lang="scss"
    scoped
>
.payCourteous {
  .payTitBox {
    height: 100rpx;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #FFFFFF;
    z-index: 99;
  }

  .resultCard {
    padding: 200rpx 0 50rpx 0;

    .imgBox {
      padding-top: 100rpx;
      display: flex;
      justify-content: center;

      image {
        width: 166rpx;
        height: 121rpx;
      }
    }

    .successful {
      text-align: center;
      margin-top: 30rpx;
    }

    .btnBox {
      display: flex;
      justify-content: center;
      margin-top: 30rpx;

      .btn {
        width: 140rpx;
        height: 58rpx;
        line-height: 58rpx;
        border: 2rpx solid #999999;
        text-align: center;
        font-size: 24rpx;
        color: #999999;
      }

      .orderBtn {
        margin-right: 30rpx;
      }

      .homeBtn {
        background: #ff5000;
        border: none;
        color: #FFEBC4;
      }
    }

    .orderPolite {
      display: flex;
      align-items: center;
      width: 670rpx;
      background: #FFF9F6;
      border: 2rpx solid #FBE9E6;
      margin: 50rpx auto 0 auto;
      padding: 0 30rpx;
      box-sizing: border-box;

      .politeImgBox {
        image {
          width: 186rpx;
          height: 186rpx;
        }
      }

      .rightInfo {
        flex: 1;
        font-size: 28rpx;
        color: #333333;

        .growthBox {
          margin-bottom: 30rpx;

          .growth {
            color: #EF4444;
          }
        }

        .couponBox {
          margin-bottom: 30rpx;

          .coupon {
            color: #EF4444;
          }

          &:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }
}
</style>
